<template>
  <div>
    <top-area></top-area>
    <router-view></router-view>
    <div id="map"></div>
    <div class="btn">
      <button @click="handleDirection">导航</button>
    </div>
    <bottom-area></bottom-area>
  </div>
</template>

<script setup>
import TopArea from './components/TopArea.vue'
import BottomArea from './components/BottomArea.vue'
import { onMounted, ref, provide } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { Mapbox, Scene } from '@antv/l7'
import useControls from './hooks/useControls'
import mapBoxDirection from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js'
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'
const MAPBOX_TOKEN =
  'pk.eyJ1IjoieHpkbWFwZ2lzIiwiYSI6ImNtOWtxbXU3eTBwcGEya3BvYW9ubWZ6bWwifQ.bn8nv2PPHfWDeDWExmQamQ' // 请替换成自己的mapbox token
//map=>mapbox实例 scene=>l7的实例
let map = ref(null),
  scene = ref(null)
let isDirectionShow = ref(false)
let diretion = new mapBoxDirection({
  accessToken: MAPBOX_TOKEN,
})
onMounted(() => {
  mapboxgl.accessToken = MAPBOX_TOKEN
  map.value = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v11',
    center: [114.27, 30.59],
    zoom: 1,
    projection: 'globe',
  })
  scene.value = new Scene({
    id: 'map',
    map: new Mapbox({
      mapInstance: map.value,
    }),
    logoVisible: false,
  })
  map.value.on('load', () => {
    //添加fog效果 根据当前中心点位置来设置不同的fog效果(设置光的明亮效果)
    map.value.on('move', () => {
      let center = map.value.getCenter()
      map.value.setFog({
        color: `hsl(0,0%,${Math.abs(center.lng / 360)})`,
        'high-color': `hsl(0,0%,${Math.abs(center.lng / 360)})`,
      })
    })
  })
  //添加控件l7控件
  useControls(scene.value, map.value)

  provide('mapScene', {
    map: map.value,
    scene: scene.value,
  })
})
//添加一个导航插件
function handleDirection() {
  isDirectionShow.value = !isDirectionShow.value
  if (isDirectionShow.value) {
    map.value.addControl(diretion, 'top-left')
  } else {
    map.value.removeControl(diretion)
  }
}
</script>

<style lang="scss" scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.btn {
  position: fixed;
  top: 200px;
  left: 10px;
  button {
    padding: 10px 20px;
  }
}
</style>
